<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link
    href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'
    rel='stylesheet' type='text/css'>
</head>
<style>
  body {
    font-family: 'Lato'
  }

  .wdt-loading-screen {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 999998;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
  }

  .wdt-loading-phrases {
    width: 300px;
    margin: 0 auto;
    height: 106px;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
  }

  .wdt-loading-phrases:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  }

  .wdt-loading-phrase {
    padding-left: 30px;
    position: relative;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    transform: translateY(30px);
    line-height: 30px;
    height: 30px;
  }

  .wdt-loading-phrase:before {
    content: " ";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  .wdt-loading-phrase:after {
    opacity: 0;
    height: 11px;
    width: 7px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    border-right: 3px solid #2EB150;
    border-top: 3px solid #2EB150;
    border-radius: 2.5px !important;
    content: '';
    left: 3px;
    top: 16px;
    position: absolute;
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
  }

  .wdt-loading-phrase.wdt-checked:after {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-duration: 200ms;
    -moz-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-name: checkmark;
    -moz-animation-name: checkmark;
    animation-name: checkmark;
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  @-webkit-keyframes checkmark {
    0% {
      height: 0;
      width: 7px;
      opacity: 1;
    }

    20% {
      height: 2px;
      width: 7px;
      opacity: 1;
    }

    40% {
      height: 5px;
      width: 7px;
      opacity: 1;
    }

    100% {
      height: 11px;
      width: 7px;
      opacity: 1;
    }
  }

  @-moz-keyframes checkmark {
    0% {
      height: 0;
      width: 7px;
      opacity: 1;
    }

    20% {
      height: 2px;
      width: 7px;
      opacity: 1;
    }

    40% {
      height: 5px;
      width: 7px;
      opacity: 1;
    }

    100% {
      height: 11px;
      width: 7px;
      opacity: 1;
    }
  }

  @keyframes checkmark {
    0% {
      height: 0;
      width: 7px;
      opacity: 1;
    }

    20% {
      height: 2px;
      width: 7px;
      opacity: 1;
    }

    40% {
      height: 5px;
      width: 7px;
      opacity: 1;
    }

    100% {
      height: 11px;
      width: 7px;
      opacity: 1;
    }
  }
</style>

<body>


  <div class="wdt-loading-screen">

    <div class="wdt-loading-phrases">

      <div class="wdt-loading-phrase-category" data-category="default">
        <div class="wdt-loading-phrase">Doing great things...</div>
        <div class="wdt-loading-phrase">Writing project descriptions...</div>
        <div class="wdt-loading-phrase">Feeding the unicorns...</div>
        <div class="wdt-loading-phrase">Collecting jobs for you...</div>
        <div class="wdt-loading-phrase">Calculating scores...</div>
        <div class="wdt-loading-phrase">Finding best talented people...</div>
        <div class="wdt-loading-phrase">Fixing responsive issues...</div>
        <div class="wdt-loading-phrase">Painting office walls...</div>
        <div class="wdt-loading-phrase">Coffee break...</div>
        <div class="wdt-loading-phrase">Feeding cats...</div>
        <div class="wdt-loading-phrase">Health check...</div>
        <div class="wdt-loading-phrase">Storage check...</div>
      </div>

      <div class="wdt-loading-phrase-category" data-category="profile">
        <div class="wdt-loading-phrase">Getting avatar...</div>
        <div class="wdt-loading-phrase">Collecting project memberships...</div>
        <div class="wdt-loading-phrase">Getting dom together...</div>
        <div class="wdt-loading-phrase">Getting followers...</div>
        <div class="wdt-loading-phrase">Calculating best skills...</div>
        <div class="wdt-loading-phrase">Getting feed...</div>
        <div class="wdt-loading-phrase">Writing title...</div>
      </div>

    </div>

  </div>
</body>
<script>
  !function (a, b) {"function" == typeof define && define.amd ? define(b) : "object" == typeof exports ? module.exports = b() : a.wdtLoading = b()}(this, function () {function a(a, b) {var c = "string" == typeof a ? a : d(a); return c.indexOf(" " + b + " ") >= 0} function b(b, c) {var e = d(b), f = e + c; a(e, c) || (b.className = f.substring(1))} function c(b, c) {var e, f = d(b); a(b, c) && (e = f.replace(" " + c + " ", " "), b.className = e.substring(1, e.length - 1))} function d(a) {return (" " + (a && a.className || "") + " ").replace(/\s+/gi, " ")} function e(a) {a && a.parentNode && a.parentNode.removeChild(a)} var f = {}; f.defaults = {category: "default", speed: 2e3}, f.start = function (a) {this.options = g(f.defaults, a), this.wdtLoadingScreen = document.querySelector(".wdt-loading-screen"); for (var b = document.querySelectorAll(".wdt-loading-phrase-category"), c = 0; c < b.length; c++)h(b[c], {display: "none"}); this.wdtPhraseActiveCat = document.querySelector('.wdt-loading-phrase-category[data-category="' + this.options.category + '"]'), h(this.wdtPhraseActiveCat, {display: "block"}), this.activePhrases = this.wdtPhraseActiveCat.querySelectorAll(".wdt-loading-phrase"), this.activePhrasesCount = this.activePhrases.length, this.activePhrasesCount < 5 && console.warn("wdtLoading -->", "Add more phrase for better spin animation!"); for (var d = [], c = 0; c < this.activePhrases.length; c++)d.push(this.activePhrases[c]), e(this.activePhrases[c]); d = f.shuffle(d); for (var c = 0; c < d.length; c++)this.wdtPhraseActiveCat.appendChild(d[c]); return h(this.wdtLoadingScreen, {display: "block"}), f.spin(), this}, f.spin = function () {var a = this; this.phraseHeight = a.wdtPhraseActiveCat.querySelector(".wdt-loading-phrase").scrollHeight, console.log(document.querySelector(".wdt-loading-phrase")), a.currentIndex = 0, a.currentTransform = this.phraseHeight, a.spinInternal = setInterval(function () {a.activePhrases = a.wdtPhraseActiveCat.querySelectorAll(".wdt-loading-phrase"), b(a.activePhrases[a.currentIndex], "wdt-checked"), a.currentIndex++, a.currentTransform = a.currentTransform - a.phraseHeight; for (var d = 0; d < a.activePhrases.length; d++)h(a.activePhrases[d], {transform: "translateY(" + a.currentTransform + "px)"}); if (a.currentIndex > 1) {var e = a.activePhrases[a.currentIndex - 2], f = e.cloneNode(!0); c(f, "wdt-checked"), b(f, "wdt-cloned-phrase"), f.style.transform = "", a.wdtPhraseActiveCat.appendChild(f)} }, this.options.speed)}, f.done = function () {this.spinInternal && clearInterval(this.spinInternal), h(this.wdtLoadingScreen, {display: "none"}); for (var a = document.querySelectorAll(".wdt-cloned-phrase"), b = document.querySelectorAll(".wdt-loading-phrase"), d = 0; d < b.length; d++)c(b[d], "wdt-checked"), b[d].style.transform = ""; for (var d = 0; d < a.length; d++)e(a[d]); clearInterval(this.spinInternal)}, f.shuffle = function (a) {for (var b, c, d = a.length; d;)c = Math.floor(Math.random() * d--), b = a[d], a[d] = a[c], a[c] = b; return a}; var g = function () {var a = {}, b = !1, c = 0, d = arguments.length; "[object Boolean]" === Object.prototype.toString.call(arguments[0]) && (b = arguments[0], c++); for (var e = function (c) {for (var d in c) Object.prototype.hasOwnProperty.call(c, d) && (b && "[object Object]" === Object.prototype.toString.call(c[d]) ? a[d] = g(!0, a[d], c[d]) : a[d] = c[d])}; d > c; c++) {var f = arguments[c]; e(f)} return a}, h = function () {function a(a) {return a.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function (a, b) {return b.toUpperCase()})} function b(a) {var b = document.body.style; if (a in b) return a; for (var c, d = e.length, f = a.charAt(0).toUpperCase() + a.slice(1); d--;)if (c = e[d] + f, c in b) return c; return a} function c(c) {return c = a(c), f[c] || (f[c] = b(c))} function d(a, b, d) {b = c(b), a.style[b] = d} var e = ["Webkit", "O", "Moz", "ms"], f = {}; return function (a, b) {var c, e, f = arguments; if (2 == f.length) for (c in b) e = b[c], void 0 !== e && b.hasOwnProperty(c) && d(a, c, e); else d(a, f[1], f[2])}}(); return f});

  wdtLoading.start();
</script>

</html>